<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>下拉列表</title>
</head>
<body>
    <select id="pro" onchange="pro1()">
        <option>请选择省</option>
    </select>
    <select id="city">
    </select>
</body>
<script>
    var citys=
    [
        ['湖南省','长沙市','湘潭市','株洲市','张家界市'],
        ['江西省','吉安市','宜春市','赣州市','井冈山市','南昌市','上饶市'],
        ['上海省','黄浦市','宝山市','卢湾市'],
        ['浙江省','温州市','杭州市']
    ]
    window.onload=function(){
        let pro=document.querySelector("#pro");
        for(let i=0;i<citys.length;i++){
        let op=new Option(citys[i][0],citys[i][0]);//(txt,value)
    //  pro.appendChild(op);
        pro.options.add(op);
        }
    }
    //清空city项
    function selclear(){
        let city=document.querySelector("#city");
    //  city.empty();//jq方法
    //  city.innerHTML="";
        city.options.length=0;
    }
    function pro1(){
        let pro2=document.querySelector("#pro").value;
        selclear()
        for(let i=0;i<citys.length;i++){
            for(let j=1;j<citys[i].length;j++){
                if(pro2==citys[i][0]){
                    let op=new Option(citys[i][j],citys[i][j]);//(txt,value)
                    let city=document.querySelector("#city");
                    city.options.add(op)
                }
            }
        }
    }
    
</script>
</html>